<template>
  <div class="DesignFiles" v-loading="loading">
    <!-- <div style="margin-bottom: 10px">
      <el-input
        size="mini"
        placeholder="请输入内容"
        v-model="form.number"
        @keyup.enter.native="onSearch"
        class="input-with-select"
      >
        <el-button slot="prepend" icon="el-icon-s-operation"></el-button>
        <el-button
          slot="append"
          icon="el-icon-search"
          @click="onSearch"
        ></el-button>
      </el-input>
      <div class="DesignFiles-select">
        <div>
          <div>可用状态：</div>
          <div>
            <el-checkbox-group v-model="checkList">
              <el-checkbox label="全部"></el-checkbox>
              <el-checkbox label="正常"></el-checkbox>
              <el-checkbox label="停用"></el-checkbox>

            </el-checkbox-group>
          </div>
        </div>
      </div>
    </div> -->
    <el-form
      size="mini"
      ref="form"
      :model="form"
      label-position="top"
      class="myform"
    >
      <div>
        <el-form-item label="款号" class="myform-item">
          <el-input
            v-model="form.number"
            placeholder="请输入款号"
            @keyup.enter.native="onSearch"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="是否有物料" class="myform-item">
          <el-select v-model="form.is_matter" placeholder="请选择">
            <el-option
              v-for="item in cities"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="确认状态" class="myform-item">
          <el-select v-model="form.state" placeholder="请选择">
            <el-option
              v-for="item in citiesState"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item style="margin-top: 39px">
          <el-button type="primary" @click="onSearch">查询</el-button>
        </el-form-item>
      </div>
      <div></div>
    </el-form>
    <div class="DesignFiles-button">
      <el-dropdown size="mini" split-button type="primary">
        生成
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item>版单</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
      <el-dropdown
        size="mini"
        split-button
        type="primary"
        style="margin: 0 10px"
      >
        导出
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item>套装</el-dropdown-item>
          <el-dropdown-item>月份款式图</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
      <el-dropdown size="mini" split-button type="primary">
        打印
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item>套装打印</el-dropdown-item>
          <el-dropdown-item>产品确认</el-dropdown-item>
          <el-dropdown-item>部位尺寸表</el-dropdown-item>
          <el-dropdown-item>月份款式图</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
    <el-container>
      <el-main class="mymain">
        <div class="DesignFiles-module">
          <div class="DesignFiles-module-div" v-for="item in list" :key="item.id" @mouseenter="changeActive(item)" @mouseleave="removeActive()">
            <div class="DesignFiles-module-div-edit" v-if="item.id == id">
              <div>
                <div class="pointer" @click="onOpen(item)" @mouseenter="changeActiveEdit(0)" @mouseleave="removeActiveEdit()">
                  <div style="font-size: 12px" v-if="edit == 0">打开</div>
                  <i class="el-icon-folder-opened" v-else></i>
                </div>
                <div class="pointer" v-if="qxobj && qxobj.save" @click="onEdit(item)" @mouseenter="changeActiveEdit(1)" @mouseleave="removeActiveEdit()">
                  <div style="font-size: 12px" v-if="edit == 1">编辑</div>
                  <i class="el-icon-edit-outline" v-else></i>
                </div>
                <div class="pointer" @mouseenter="changeActiveEdit(2)" @mouseleave="removeActiveEdit()">
                  <div style="font-size: 12px" v-if="edit == 2">复制</div>
                  <i class="el-icon-copy-document" v-else></i>
                </div>
                <!-- <div
                  class="pointer"
                  @click="clickOms(item)"
                  @mouseenter="changeActiveEdit(3)"
                  @mouseleave="removeActiveEdit()"
                >
                  <div style="font-size: 12px" v-if="edit == 3">推送</div>
                  <i class="el-icon-position" v-else></i>
                </div> -->
                <div class="pointer" @click="onSelect(item)" @mouseenter="changeActiveEdit(4)" @mouseleave="removeActiveEdit()" v-if="!selectarr(item.number)">
                  <div style="font-size: 12px" v-if="edit == 4">选中</div>
                  <i class="el-icon-circle-check" v-else></i>
                </div>
                <div class="pointer" @click="onCancel(item)" @mouseenter="changeActiveEdit(5)" @mouseleave="removeActiveEdit()" v-if="selectarr(item.number)">
                  <i class="el-icon-remove-outline" v-if="edit == 5"></i>
                  <div style="font-size: 12px" v-else>取消</div>
                </div>
              </div>
              <div class="pointer">
                <i class="el-icon-delete"></i>
              </div>
            </div>
            <div class="DesignFiles-module-div-stop pointer" v-if="item.approval_state == 4" @click="onOpen(item)">
              <div>停</div>
            </div>

            <div class="DesignFiles-module-div-triangle" v-if="selectarr(item.number)"></div>
            <div class="DesignFiles-module-div-trianglegif" v-if="item.is_gif == 1">
              <div>赠</div>
            </div>
            <div class="DesignFiles-module-div-title">
              <div class="DesignFiles-module-div-title-image">
                <el-image :src="item.img" fit="contain">
                  <div slot="error" style="
                      width: 80px;
                      height: 106px;
                      text-align: center;
                      line-height: 106px;
                    ">暂无图片</div>
                </el-image>
              </div>
              <div class="DesignFiles-module-div-title-content">
                <div class="DesignFiles-module-div-title-content-top">
                  <div>
                    <div style="font-weight: 800">{{ item.number }}</div>
                    <div style="font-size: 12px">上新<span style="font-size: 14px; color: #999999">{{ item.year }}-{{ item.month }}</span></div>
                  </div>
                  <div>
                    <div class="u-text-1" style="width: 150px">
                      {{ item.name }}
                    </div>
                    <div>
                      <span :style="{ color: statecolor(item.state) }">{{item.state | statetext }}</span>
                    </div>
                  </div>
                </div>
                <div class="DesignFiles-module-div-title-content-text">
                  <div>
                    <div class="u-text-1">{{ item.short_name || "暂无" }}</div>
                    <div class="u-text-1">
                      {{ item.product_category || "暂无" }}
                    </div>
                    <div class="u-text-1">
                      {{ item.detail_category || "暂无" }}
                    </div>
                    <div class="u-text-1">{{ item.season || "暂无" }}</div>
                  </div>
                  <div>
                    <div class="u-text-1">{{ item.target || "暂无" }}</div>
                    <div class="u-text-1">{{ item.brand || "暂无" }}</div>
                    <div class="u-text-1">套装编码：<span style="">{{item.package_number || "暂无" }}</span></div>
                  </div>
                </div>
              </div>
            </div>
            <div class="DesignFiles-module-div-detail">
              <div class="DesignFiles-module-div-detail-one">
                <div>
                  <div>图</div>
                  {{ item.f3 || "暂无" }}
                </div>
                <div>
                  <div>产</div>
                  {{ item.designer || "暂无" }}
                </div>
                <div>
                  <div>版</div>
                  {{ item.paper_designer || "暂无" }}
                </div>
                <div>
                  <div>绣</div>
                  {{ item.embroider_designer || "暂无" }}
                </div>
              </div>
              <div class="DesignFiles-module-div-detail-two">
                <div>创建人：{{ item.creator || "暂无" }}</div>
                <div>创建时间：{{ item.creation_time }}</div>
              </div>
            </div>
          </div>
        </div>
      </el-main>
    </el-container>
    <pagination :form="form" :total="total" @paginationPostOrderTaskList="postAdminOperategetTypeList"/>
  </div>
</template>

<script>
import CryptoJS from "crypto-js";
import { postAdminOperategetTypeList, postAdminOmsaddProduct } from "@/api";
import { timestampToTime } from "@/utils/time.js";
import pagination from "@/components/pagination.vue";
export default {
  components: { pagination },
  filters: {
    statetext(e) {
      if (e == 0) return "未确认";
      if (e == 1) return "设计确认";
      if (e == 2) return "技术确认";
      if (e == 3) return "生产确认";
    },
    timestampToTime(e) {
      return timestampToTime(e);
    },
  },
  data() {
    return {
      loading: false,
      qxobj: "",
      edit: -1,
      id: "",
      checkList: [],
      list: [],
      cities: [
        {
          label: "全部",
          value: "0",
        },
        {
          label: "有",
          value: "1",
        },
        {
          label: "无",
          value: "2",
        },
      ],
      citiesState: [
        {
          label: "全部",
          value: "",
        },
        {
          label: "未确认",
          value: "0",
        },
        {
          label: "设计确认",
          value: "1",
        },
        {
          label: "技术确认",
          value: "2",
        },
        {
          label: "生产确认",
          value: "3",
        },
      ],
      form: {
        number: "",
        is_matter: "0",
        state: "",
        page: 1,
        size: 50,
      },
      total: 1,
      selarr: [],
    };
  },
  activated() {
    this.qxobj = JSON.parse(this.$route.query.qxobj);
    this.postAdminOperategetTypeList(this.form);
  },
  methods: {
    removeActiveEdit() {
      this.edit = -1;
    },
    changeActiveEdit(e) {
      this.edit = e;
    },
    statecolor(e) {
      if (e == 0) return "#999999";
      if (e == 1) return "#2C70D6";
      if (e == 2) return "#67C23A";
      if (e == 3) return "#752CD6";
    },
    selectarr(e) {
      let arr = this.selarr;
      let istrue = arr.some((i) => {
        return i == e;
      });
      return istrue;
    },
    onSelect(e) {
      let arr = this.selarr;
      arr.push(e.number);
      this.selarr = arr;
    },
    onCancel(e) {
      let arr = this.selarr;
      let arrs = this.remove(arr, e.number);
      this.selarr = arrs;
    },
    remove(arr, val) {
      var index = arr.indexOf(val);
      if (index > -1) {
        arr.splice(index, 1);
      }
      return arr;
    },
    async clickOms(e) {
      let obj = {
        type_no: e.number,
        action_type: "add",
      };
      // if(e.is_oms==1){
      //     obj.action_type = "update"
      // }else{
      //     obj.action_type = "add"
      // }
      try {
        let res = await postAdminOmsaddProduct(obj);
        this.$message.success("推送成功");
      } catch (error) {}
    },
    changeActive(item) {
      if (item.approval_state != 4) {
        this.id = item.id;
      } else {
        this.id = "";
      }
    },
    removeActive() {
      this.id = "";
    },
    // 加密
    encrypt(word) {
      const key = CryptoJS.enc.Utf8.parse("SHISANYUABCDEF16"); //十六位十六进制数作为密钥
      const iv = CryptoJS.enc.Utf8.parse("61FEDCBASHISANYU"); //十六位十六进制数作为密钥偏移量
      let srcs = CryptoJS.enc.Utf8.parse(word);
      let encrypted = CryptoJS.AES.encrypt(srcs, key, {
        iv: iv,
        mode: CryptoJS.mode.CBC,
        padding: CryptoJS.pad.Pkcs7,
      });
      return encrypted.ciphertext.toString().toUpperCase();
    },
    async onOpen(e) {
      let number = await this.encrypt(e.number);
      this.$router.push({
        name: `CustomModuleRouter`,
        params: { path: `/CustomModuleDesignFilesDetail/${number}` },
      });
    },
    async onEdit(e) {
      let number = await this.encrypt(e.number);
      this.$router.push({
        name: `CustomModuleRouter`,
        params: { path: `/CustomModuleDesignFilesDetail/${number}/2` },
      });
    },
    async postAdminOperategetTypeList(data) {
      this.loading = true;
      this.form = data;
      try {
        let res = await postAdminOperategetTypeList(this.form);
        this.list = res.data;
        this.total = Number(res.total);
        this.loading = false;
      } catch (error) {
        this.loading = false;
      }
    },
    onSearch() {
      let { form } = this;
      form.page = 1;
      form.size = 50;
      this.postAdminOperategetTypeList(form);
    },
  },
};
</script>

<style lang="scss" scoped>
.mymain {
  height: calc(100vh - 215px);
}
.myform {
  display: flex;
  justify-content: space-between;
  > div {
    display: flex;
  }
  &-item {
    margin-right: 10px;
  }
}
.DesignFiles {
  /deep/ .el-main {
    padding: 0;
  }
  background: #ffff;
  padding: 10px;
  border-radius: 2px;
  font-size: 12px;
  color: #333;
  @include boxShadow;
  .DesignFiles-select {
    @include boxShadow;
    width: calc(100% - 40px);
    padding: 20px;
    margin-top: 10px;
    > div {
      display: flex;
      margin-bottom: 10px;
      > div:nth-child(1) {
        font-size: 14px;
        width: 100px;
        text-align: right;
        margin-right: 10px;
      }
      > div:nth-child(2) {
        width: calc(100% - 140px);
      }
    }
  }
  .DesignFiles-button {
    margin-bottom: 2px;
    padding-bottom: 10px;
    border-bottom: 1px solid #efefef;
  }
  .DesignFiles-module {
    display: flex;
    flex-wrap: wrap;
    .DesignFiles-module-div {
      overflow: hidden;
      position: relative;
      margin-right: 8px;
      margin-left: 8px;
      margin-top: 10px;
      border-radius: 4px;
      @include boxShadow;
      padding: 10px;
      width: 325px;
      border: 1px solid #eaeaea;
      .DesignFiles-module-div-triangle {
        position: absolute;
        top: -30px;
        left: -30px;
        width: 0;
        height: 0;
        border: 30px solid transparent;
        border-bottom-color: #2c70d6;
        transform: rotate(-45deg);
      }
      .DesignFiles-module-div-trianglegif {
        position: absolute;
        top: -30px;
        right: -30px;
        width: 0;
        height: 0;
        border: 30px solid transparent;
        border-bottom-color: #2c70d6;
        transform: rotate(45deg);
        color: #ffffff;
        line-height: 35px;
        > div {
          position: absolute;
          bottom: -35px;
          left: -4px;
        }
      }
      .DesignFiles-module-div-stop {
        position: absolute;
        width: 354px;
        height: 214px;
        top: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #c6c6c6;
        > div {
          width: 120px;
          height: 120px;
          font-size: 60px;
          text-align: center;
          line-height: 108px;
          border: 6px solid #c6c6c6;
          border-radius: 50%;
          transform: rotate(-20deg);
        }
      }
      .DesignFiles-module-div-edit {
        font-size: 16px;
        width: 314px;
        position: absolute;
        bottom: 0;
        left: 0;
        z-index: 10;
        background: rgba(44, 112, 214, 0.8);
        height: 34px;
        display: flex;
        align-items: center;
        color: #2c70d6;
        justify-content: space-between;
        padding: 0 16px;
        > div:nth-child(1) {
          display: flex;
          > div {
            border-radius: 2px;
            width: 40px;
            height: 20px;
            background: #fff;
            text-align: center;
            line-height: 20px;
            margin-right: 10px;
          }
        }
        > div:nth-child(2) {
          color: #fff;
          font-size: 18px;
        }
      }

      .DesignFiles-module-div-title {
        border-bottom: 1px solid #efefef;
        display: flex;
        justify-content: space-between;
        border-bottom: 1px solid #e4e4e4;
        .DesignFiles-module-div-title-image {
          width: 80px;
          height: 124px;
          // margin-left: 15px;
          display: flex;
          align-items: center;
          justify-content: center;

          > .el-image {
            width: 80px;
            height: 106px;
          }
        }
        .DesignFiles-module-div-title-content {
          width: 230px;
          .DesignFiles-module-div-title-content-top {
            border-bottom: 1px solid #e4e4e4;
            padding-bottom: 10px;
            > div {
              display: flex;
              align-items: center;
            }
            > div:nth-child(1) {
              > div:nth-child(1) {
                font-size: 16px;
                margin-right: 15px;
              }
            }
            > div:nth-child(2) {
              padding-top: 10px;
              > div:nth-child(1) {
                font-size: 14px;
                margin-right: 15px;
              }
              > div:nth-child(2) {
                padding-left: 15px;
                border-left: 1px solid #e3e3e3;
                font-size: 12px;
              }
            }
          }
          .DesignFiles-module-div-title-content-text {
            > div {
              display: flex;
              align-items: center;
              margin: 10px 0;
            }
            > div:nth-child(1) {
              > div:not(:nth-last-child(1)) {
                border-right: 1px solid #e3e3e3;
                padding-right: 10px;
              }
              > div:not(:nth-child(1)) {
                padding-left: 10px;
              }
            }
            > div:nth-child(2) {
              > div:not(:nth-last-child(1)) {
                border-right: 1px solid #e3e3e3;
                padding-right: 10px;
              }
              > div:not(:nth-child(1)) {
                padding-left: 10px;
              }
            }
          }
        }
      }
      .DesignFiles-module-div-detail {
        width: 100%;
        .DesignFiles-module-div-detail-one {
          display: flex;
          justify-content: space-between;
          font-size: 10px;
          padding: 10px 0;
          > div {
            display: flex;
            align-items: center;
            > div {
              width: 20px;
              height: 20px;
              text-align: center;
              line-height: 20px;
              border-radius: 20px;
              margin-right: 10px;
            }
          }
          > div:nth-child(1) {
            > div:nth-child(1) {
              border: 1px solid #752cd6;
              color: #752cd6;
            }
          }
          > div:nth-child(2) {
            > div:nth-child(1) {
              border: 1px solid #ff7171;
              color: #ff7171;
            }
          }
          > div:nth-child(3) {
            > div:nth-child(1) {
              border: 1px solid #ff8600;
              color: #ff8600;
            }
          }
          > div:nth-child(4) {
            > div:nth-child(1) {
              border: 1px solid #2c70d6;
              color: #2c70d6;
            }
          }
        }
        .DesignFiles-module-div-detail-two {
          display: flex;
          color: #999999;
          > div:nth-child(1) {
            padding-right: 15px;
            border-right: 1px solid #e3e3e3;
          }
          > div:nth-child(2) {
            padding-left: 15px;
          }
        }
      }
    }
  }
}
</style>
